<template>
  <div class="main">
    <div class="box">
      <div class="nav">
        <div class="one">
          <div>
            <img
              style="width: 41px; height: 41px"
              src="../../assets/ConsignmentFourzero/home/logo.png"
              alt=""
            />
          </div>
          <div style="color: #fff; margin-left: 10px; font-size: 16px">
            虞都互联
          </div>
        </div>
        <div class="two">
          <ul>
            <li
              :class="{ active: ids == item.id }"
              v-for="item in arr"
              :key="item.id"
              @click="getId(item)"
            >
              {{ item.name }}
            </li>
            <li>
              <a style="color: #fff" :href="erpHost">商户端</a>
            </li>
            <!-- <li
              :class="{ active: ids == 4 }"
              @click="getId({url: '/article'})"
            >
              登录/注册
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 首页视频 -->
      <div class="video" v-if="ids && ids == 1">
        <video autoplay loop muted playsinline>
          <source
            src="https://imgage.maimaihao.com/yuduhulian/erp/assets/ConsignmentFourzero/Scene.mp4"
            type="video/mp4"
          />
        </video>
        <div class="title flex">
          <span>游戏账号管理系统 - 商家互联版</span>
          <img src="../../assets/img/699.png" alt="" style="width:196px;margin-left:10px">
        </div>
        <div class="title_txt">
          让每个商家都有一个属于自己的平台
          <br />
          为游戏账号交易行业广大商家开发的一款互联管理系统，让商家拥有属于自己的独立站，为做私域降本增效，打造属于商家自己的互联生态
          。 适用于个人号商，电商，自媒体商家等。
        </div>
        <div class="ruzhu" @click="zixunkefu">去购买</div>
      </div>
      <!-- 系统定制 -->
      <!-- <div v-else-if="ids && ids == 2">
        98765434567898
       </div> -->
      <div class="xitongdingzhi" v-else-if="ids && ids == 2">
        <div class="title">虞都互联</div>
        <div class="title_txt">
          全平台一手号源，号商独立联系、平台不参与任何抽成，自营商城独立自由设置。
          批量导入上架、扫码一键上架。各大渠道人工上架。
        </div>
        <!-- <div class="bushu">系统独立部署，独立域名</div>
        <div class="shujuku">
          批量导入上架、扫码一键上架。各大渠道人工上架。
        </div> -->
        <!-- <div class="ruzhu" @click="zixunkefu">联系我们</div> -->
      </div>
      <!-- 系统介绍 -->
      <div class="xitongJieshao" v-else-if="ids && ids == 3">
        <img
          class="img_xitong"
          src="../../assets/ConsignmentFourzero//system/xitongjieshao.png"
          alt=""
        />
      </div>
    </div>
    <!-- 联系我们 -->
    <!-- <el-dialog
      title="联系我们"
      :visible.sync="centerDialogVisible"
      width="500px"
      center
    >
      <div style="text-align: center; margin-top: 12px">
        <div
          style="
            font-size: 18px;
            padding: 0 0 18px 0;
            width: 300px;
            text-align: left;
          "
        >
          联系手机号：19139006222
        </div>
        <div
          style="
            font-size: 18px;
            padding: 0 0 18px 0;
            width: 300px;
            text-align: left;
          "
        >
          联系微信号：yudu3518
        </div>
        <img
          style="width: 100%; height: 100%"
          src="https://imgage.maimaihao.com/402883e9900b2a6901900b8252f60040.jpg"
          alt=""
        />
      </div>
    </el-dialog> -->
    <Lisnxi ref="Lisnxi"></Lisnxi>
  </div>
</template>

<script>
import Lisnxi from "./lianxiwomen.vue"
export default {
  components:{Lisnxi},
  data() {
    return {
      ids: 1,
      arr: [
        { name: '首页', id: 1, url: '/login' },
        { name: '系统价格', id: 2, url: '/xitongdz' },
        { name: '视频介绍', id: 6, url: '/shipin' },
        { name: '系统介绍', id: 3, url: '/xtjs' },
        { name: '黑号查询', id: 5, url: '/heihao' },

        // { name: '登录/注册', id: 4, url: '/article' }
      ],
      centerDialogVisible: false
    }
  },
  created() {

  },
  methods: {
    getId(item) {
      if (item.url) {
        this.$router.push(item.url).catch((err) => {
        })
      }
    },
    zixunkefu() {
      // this.centerDialogVisible = true
      this.$refs.Lisnxi.open()
    }
  },
  watch: { // 监听,当路由发生变化的时候执行
    '$route.path': { // $route可以用引号，也可以不用引号
      handler(to, from) {
        //console.log('路由变化了')
        //console.log('当前页面路由：' + to); //新路由信息
        //console.log('上一个路由：' + from); //老路由信息
        if (to == '/login') {
          this.ids = 1
        } else if (to == '/xitongdz') {
          this.ids = 2
        } else if (to == '/xtjs') {
          this.ids = 3
        } else if (to == '/heihao') {
          this.ids = 5
        } else if (to == '/shipin' || to == '/videoPlay' || to == '/videoPage') {
          this.ids = 6
        }
      },
      deep: true, // 深度观察监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.nav {
  width: 1200px;
  display: flex;
  justify-content: space-between;
}

.box {
  width: 1200px;
}
li {
  list-style: none;
  font-size: 18px;
  color: #fff;
  padding-bottom: 3px;
  cursor: pointer;
}

.one {
  width: 300px;
  display: flex;
  align-items: center;
  margin-left: 10px;
  z-index: 1;
}

.two {
  z-index: 1;
}

ul {
  margin-right: 20px;
  // width: 460px;
  display: flex;
  justify-content: space-between;
  li {
    margin-right: 30px;
  }
}

.video {
  position: relative; /* Or 'fixed' or 'absolute' depending on your layout */
  width: 1200px; /* Full width */
  height: 700px; /* Full height (you can also use '100%' here) */
  overflow: hidden;
  margin-top: -57px;
  .title {
    position: absolute;
    top: 400px;
    left: 167px;
    font-weight: 800;
    font-size: 48px;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000;
  }

  .title_txt {
    position: absolute;
    top: 480px;
    left: 167px;
    width: 832px;
    height: 40px;
    font-weight: 800;
    font-size: 18px;
    color: #ffffff;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-shadow: 2px 2px 5px #000;
  }

  .ruzhu {
    position: absolute;
    top: 86%;
    left: 167px;
    width: 141px;
    height: 46px;
    background-color: #fff;
    text-align: center;
    line-height: 46px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 24px;
    color: #5d87ff;
    cursor: pointer;
  }
}

.video video {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  // min-width: 100%;
  // min-height: 100%;
  width: 1200px;
  height: 700px;
  z-index: 0;
  object-fit: cover; /* Resize the video to cover the entire container */
  // display: inline-block;
}

.active {
  background: linear-gradient(
    to right,
    #3affcc 0%,
    #00aeff 100%
  ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
  -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
  -webkit-text-fill-color: transparent; /*给文字设置成透明*/
  border-bottom: 2px solid #50ceff;
  font-weight: bold;
}

.xitongdingzhi {
  width: 1200px;
  height: 460px;
  margin-top: -57px;
  background-image: url("../../assets/ConsignmentFourzero/system/xitongBg.png");
  background-size: 100% 100%;
  padding-top: 0.1px;
  padding-left: 100px;

  .title {
    font-weight: 800;
    font-size: 32px;
    color: #ffffff;
    margin-top: 200px;
    width: 460px;
    margin-bottom: 20px;
    text-align: left;
  }

  .title_txt {
    width: 460px;
    height: 126px;
    font-weight: 800;
    font-size: 16px;
    color: #ffffff;
    line-height: 20px;
    text-align: left;
  }

  .ruzhu {
    width: 96px;
    height: 32px;
    background-color: #fff;
    text-align: center;
    line-height: 32px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 16px;
    color: #5d87ff;
    cursor: pointer;
  }
}

.xitongJieshao {
  width: 1200px;
  height: 326px;
  margin-top: -57px;
  .img_xitong {
    width: 100%;
    height: 100%;
    z-index: 0;
  }
}


</style>